<template>
  <div class="seller" style="background-color: transparent;">
    <div v-title v-if="Seller">{{Seller.name}}</div>
    <div>

      <div class="seller-header" v-if="Seller" @click="showInfo">
        <!-- 主要内容：左侧头像、右侧描述 -->
        <div class="content-wrapper">
          <div class="avatar">
            <img :src="sellerImg">
          </div>

          <div class="content">
            <div class="title">
              <!-- <span class="brand"></span> -->
              <span class="name">{{ Seller.name }}</span>
            </div>

            <div class="description">
              <p class="text">电话：{{Seller.telephone}}</p>
              <p class="text">地址：{{Seller.address}}</p>
            </div>

          </div>

        </div>
        <!-- 公告 -->
        <div class="bulletin-wrapper">
          <marquee>
            <marquee-item v-for="(item,index) in gginfo" :key="index" class="text">{{item}}</marquee-item>
          </marquee>
        </div>

        <!-- 背景 -->
        <div class="background">
          <img :src="sellerImg">
        </div>
        <!-- 详情 -->
        <div class="back">
          <i class="iconfont icon-more"></i>
        </div>
      </div>

      <!-- 横线分隔条 -->
      <cross-line v-if="Vouchers!=null && Vouchers.length > 0"></cross-line>

      <!-- 优惠卡劵 -->
      <div class="cart-text" v-if="Vouchers!=null && Vouchers.length > 0">
        <h1 class="title">优惠卡劵</h1>
        <div v-if="Vouchers!=null" v-for="(info,index) in Vouchers" :key="index">
          <div class="text" v-if="index < 1">
            <div class="card" :style={backgroundColor:info.bgColor}>
              <div class="cart-info">
                <p class="zk-title">{{info.mingc}}</p>
                <p class="zk-desc">{{info.beiz}}</p>
                <div>

                  <span class="zk-pic">￥{{info.zongJe}}</span>
                  <span class="zk-pic-old">￥{{info.dikJine}}</span>
                  <!-- <span class="zk-pic-zk">{{VoucherZk(info.zongJe,info.dikJine)}}</span> -->
                </div>

                <x-button class="zk-btn" mini @click.native="cartlink(info.bianh)">抢劵</x-button>
              </div>
            </div>
            <!-- :style={backgroundColor:info.bgColor} -->
            <!-- <x-button type="primary" @click.native="cartlink(info.bianh)" style="backgroundColor:#ffa500" >抢劵</x-button> -->
          </div>
          <div class="text" v-if="index >= 1 && !cartopen">
            <div class="card" :style={backgroundColor:info.bgColor}>
              <div class="cart-info">
                <p class="zk-title">{{info.mingc}}</p>
                <p class="zk-desc">{{info.beiz}}</p>
                <div>
                  <span class="zk-pic">￥{{info.zongJe}}</span>
                  <span class="zk-pic-old">￥{{info.dikJine}}</span>
                  <span class="zk-pic-zk">{{VoucherZk(info.zongJe,info.dikJine)}}</span>
                </div>
                <!-- <p class="zk-desc">有效日期：{{info.jiesrqFaj | formatDate}}</p> -->
                <x-button class="zk-btn" mini @click.native="cartlink(info.bianh)">抢劵</x-button>
              </div>
            </div>
            <!-- :style={backgroundColor:info.bgColor} -->
            <!-- <x-button type="primary" @click.native="cartlink(info.bianh)" style="backgroundColor:#ffa500"  >抢劵</x-button> -->
          </div>

        </div>
        <!-- <x-button  @click.native="cartopen=!cartopen" v-if="Vouchers.length>1" >{{ cartopen ? '更多' : '收起' }}</x-button> -->
        <p class="btn" v-if="Vouchers.length>1 && cartopen == true" @click="cartopen=!cartopen">{{ cartopen ? '查看更多' : '收起' }}</p>
      </div>
      <!-- 横线分隔条 -->
      <div v-if="Seller!=null && Seller.isOpenRecharge!=null">
        <cross-line v-if="  Seller.isOpenRecharge == 1 && Seller.chongzBt!=null"></cross-line>
        <div class="cart-text" v-if=" Seller.isOpenRecharge == 1 && Seller.chongzBt!=null">
          <h1 class="title">充值活动</h1>
          <div class="text">
            <div class="card-cz" style="backgroundColor:#greed">
              <div class="cart-info">
                <p class="cz-title">{{Seller.chongzBt}}</p>
                <p class="cz-desc">{{Seller.chongzBeiz}}</p>
                <x-button class="cz-btn" mini @click.native="onRecharge">充值</x-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 横线分隔条 -->
      <!-- <cross-line v-if="Vouchers!=null && Vouchers.length > 0"></cross-line>
      <div class="cpinfo" v-if="CpList!=null && CpList.length > 0">
        <h1 class="title">特价菜</h1>
        <div class="pic-wrapper">
          暂无活动
        </div>
      </div> -->
      <!-- <cross-line ></cross-line>
   <div class="cart-text" v-if="Vouchers!=null && Vouchers.length > 0">
        <h1 class="title">测试</h1>
        <div class=" sawtooth" style="height:170px;" ></div>
   </div> -->
      <div v-if="Vouchers==null || Vouchers.length <= 0">
        <!-- 横线分隔条 -->
        <cross-line v-if="CpList!=null && CpList.length > 0"></cross-line>
        <!-- 商家推荐菜 -->
        <div class="cpinfo" v-if="CpList!=null && CpList.length > 0">
          <h1 class="title">商家推荐菜({{CpList.length }})</h1>
          <div class="pic-wrapper" ref="cpRef">
            <ul class="pic-list" ref="cpListRef">
              <li class="pic-item" v-for="(info,index) in CpList" :key="index" @click="showImg(info.url,info.title)" v-if="info.urlReduce!=null && info.urlReduce.length > 0">
                <div>
                  <img v-lazy="info.urlReduce" :onerror="defaultImg">
                  <p>{{info.title}}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>

      </div>

      <!-- 横线分隔条 -->
      <cross-line v-if="Seller!=null && Seller.gongg!=null && Seller.gongg.length > 0"></cross-line>

      <!-- 公告与活动 -->
      <div class="notice" v-if=" Seller!=null && Seller.gongg!=null && Seller.gongg.length > 0">
        <h1 class="title">公告与活动</h1>
        <div class="text" v-if=" Seller!=null && Seller.gongg!=null && Seller.gongg.length > 0" v-html="Seller.gongg"></div>
      </div>

      <!-- 横线分隔条 -->
      <!-- <cross-line></cross-line> -->

      <!-- <div class="info">
        <h1 class="title">技术提供商</h1>
        <ul>
          <li class="item">广西淘美味网络科技有限公司</li>
          <li class="item">0771-5348120、18172065995</li>
          <li class="item">南宁市高科路8号高科电子产业园1号楼A座第七层</li>
        </ul>
      </div> -->
    </div>

    <!-- 图片查看 -->
    <img-preview ref="ImgPreviewRef"></img-preview>

  </div>

</template>
<script>
import BScroll from "better-scroll";
import {
  XButton,
  Swiper,
  SwiperItem,
  Marquee,
  MarqueeItem,
  Group,
  Cell
} from "vux";
import ImgPreview from "@/components/base/img-preview";
import CrossLine from "@/components/base/cross-line";
import { sign, signStr } from "@/assets/js/sign.js";
import { formatDate } from "@/assets/js/utils.js";
export default {
  components: {
    XButton,
    CrossLine,
    ImgPreview,
    Swiper,
    SwiperItem,
    Marquee,
    MarqueeItem,
    Group,
    Cell
  },
  data() {
    return {
      msg: "aaa",
      Seller: null,
      Vouchers: null,
      CpList: null,
      cartopen: true,
      defaultImg: 'this.src="' + require("@/assets/img/logo.png") + '"',
      showAll: false,
      sellerImg: "",
      gginfo: []
    };
  },
  methods: {
    init(sjid) {
      if (this.Seller == null || this.Seller.id != sjid) {
        let param = sign("/v1/api/GetSeller");
        param.append("sjid", sjid);
        this.$http.post("/GetSeller", param).then(ret => {
          if (ret.status == 200) {
            var _data = ret.data.resultObject;
            var _code = ret.data.code || ret.data.result.code;
            var _msg = ret.data.msg || ret.data.result.msg;

            if (_code == 1) {
              //商家信息
              this.Seller = _data.Seller;
              
              //存储商家信息
              this.$store.commit("addSellerInfo", _data.Seller);
              this.Vouchers = _data.Vouchers;
              this.CpList = _data.CpList;
              this.sellerImg = this.Seller.logoImgs;
              // this.Seller.imgs.forEach(url => {
              //   console.log(url);
              //   this.sellerImgs.push({
              //     url: "javascript:",
              //     img: url,
              //     title: ""
              //   });
              // });
              this.gginfo = [];
              //公告
              // console.log(this.Seller.gongg);
              let gg = _data.Seller.gongg.split("<li>");

              gg.forEach(item => {
                if (item.indexOf("li") != -1) {
                  let g = item
                    .replace("</li>", "")
                    .replace("<uo>", "")
                    .replace("</uo>", "")
                    .replace("<ul>", "")
                    .replace("</ul>", "")
                    .replace("<div>", "")
                    .replace("</div>", "")
                    .replace("<br>", "");
                  this.gginfo.push(g);
                }
              });
              // console.log(this.Vouchers)
              this.showAll = false;
              // 初始化图片横向滚动
              this.$nextTick(() => {
                this.$emit("viewIn", "seller");
                // this._initPicScroll();
                this._initcpPicScroll();

              });
            } else {
            }
          } else {
            this.$vux.toast.text(ret.data.msg, "top");
          }
        });
      }
      this.MemberLogin(this.$store.getters.getOpenId, sjid);
      
    },
    cartlink(code) {
      if (this.$store.getters.getMemberPtId == 0) {
        //登录
        this.$router.replace({
          path: `/Member/${this.$store.getters.getMemberPtOpenId}`
        });
      } else {
        //跳到领取页面
        this.$router.push({
          path: `/VoucherMain/${code}/${this.$store.getters.getFxrId}/${
            this.$store.getters.getMemberPtId
          }`
        });
      }
      // this.$router.push({ path: `/VoucherMain/${code}/${this.$store.getters.getFxrId}/${this.$store.getters.getMemberPtId}` });
      // this.$router.push({ path: `/VoucherMain/${code}/0/13` });
    },
    showInfo() {
      this.$router.push({
        name: "SellerInfo",
        params: { Seller: this.Seller, CpList: this.CpList }
      });
    },

    // 初始化图片横向滚动
    // 手动设置横向宽度
    _initPicScroll() {
      if (this.Seller.imgsReduce) {
        const picWidth = 120;
        const margin = 6;
        let width =
          (picWidth + margin) * this.Seller.imgsReduce.length - margin;
        this.$refs.picListRef.style.width = width + "px";

        if (!this.picScroll) {
          this.picScroll = new BScroll(this.$refs.picRef, {
            click: true,
            scrollX: true,
            eventPassthrough: "vertical"
          });
        } else {
          this.picScroll.refresh();
        }
      }
    },
    // 手动设置横向宽度
    _initcpPicScroll() {
      if (this.CpList) {
        const picWidth = 120;
        const margin = 6;
        let width = (picWidth + margin) * this.CpList.length - margin;
        this.$refs.cpListRef.style.width = width + "px";
        if (!this.cpScroll) {
          this.cpScroll = new BScroll(this.$refs.cpRef, {
            click: true,
            scrollX: true,
            eventPassthrough: "vertical"
          });
        } else {
          this.cpScroll.refresh();
        }
      }
    },
    showImg(url, title) {
      this.$refs.ImgPreviewRef.show(url, title);
    },
    MemberLogin(openid, sjid) {
      if (this.$store.getters.getMemberPtId == 0) {
        let param = sign("/v1/api/member/MemberGet");
        param.append("openid", openid);
        param.append("sjid", sjid);
        param.append("phone", null);
        param.append("loginid", null);
        this.$http.post("member/MemberGet", param).then(ret => {
          if (ret.status == 200) {
            var _data = ret.data.resultObject;
            var _code = ret.data.code || ret.data.result.code;
            var _msg = ret.data.msg || ret.data.result.msg;
            if (_code == 1) {
              if (_data == "" || _data == "null" || _data == null) return;
              this.$store.commit("addMemberInfoPt", _data.hyxx);
              this.$store.commit("addMemberInfoSj", _data.hycx);
              sessionStorage.setItem("openid", _data.hyxx.weixbh);
            }
          }
        });
      }
    },
    VoucherZk(pic1, pic2) {
      let val = pic1 / pic2 * 10;
      if (isNaN(val) || val == 0 || val == undefined || val == "") {
        return "";
      }
      return val + "折";
    },
    //充值中心
    onRecharge() {
     
      if (this.$store.state.memberInfoSj == null) {
        this.$vux.toast.show({ type: "text", text: "请激活会员" });
        this.$router.replace(
          "/Member/" + this.$store.getters.getMemberPtOpenId
        );
        return;
      }
      this.$router.push("/URecharge");
    }
  },
  computed: {},
  mounted(){
   
    
  },
  created() {
    let sjid = this.$route.params.sjid;
    let fxrid = this.$route.params.fxrid;
    // console.log(this.$route.params);
    this.$store.commit("addFxrId", fxrid);
    this.init(sjid);
  },
  activated() {
    this.$emit("viewIn", "seller");
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
    formatTime(time) {
      var arr = time.split(":");
      return arr[0] + ":" + arr[1];
    }
  }
};
</script>
<style lang="sass">
@import "~@/assets/scss/mixin.scss";

.seller
  width: 100%
  background-color: transparent
  overflow: hidden
  
  .overview
    position: relative
    padding: 18px
    .collect
      // border-bottom: 1px solid rgba(7, 17, 27, 0.1)
      // padding-bottom: 18px 
      .sname
        font-size: 20px
        font-weight: 700
        line-height: 14px
        margin-bottom: 15px
      .star-wrapper
        display: inline-block
        margin-right: 12px
        .star
          display: inline-block
        .ratingCount
          display: inline-block
          font-size: 14px
          color: rgb(7, 17, 27)
          line-height: 14px
      .sellCount
        display: inline-block
        font-size: 10px
        color: rgb(7, 17, 27)
        line-height: 10px
      .selldesc
        font-size: 14px
        color: rgb(7, 17, 27)
        line-height: 22px
      .beizAll
        width: 100%
        font-size: 14px
        line-height: 22px
      .beiz
        width: 100%
        font-size: 14px
        line-height: 22px
        display: -webkit-box !important
        -ms-text-overflow: ellipsis
        text-overflow:ellipsis
        overflow: hidden
        -webkit-box-orient: vertical
        -webkit-line-clamp: 3
      .btn
        font-size: 12px
        line-height: 22px
        color: #13d1be
      .collect-icon
        display: inline-block
        position: absolute
        top: 18px
        right: 18px
        text-align: center
        .icon-favorite
          display: inline-block
          color: #d4d6d9
          font-size: 24px
          margin-left: 5px
          margin-bottom: 8px
          &.active
            color: rgb(240, 20, 20)
        .text
          font-size: 10px
          line-height: 10px
          color: rgb(77, 85, 93)
    .param
      padding-top: 18px
      display: flex
      .left, .mid, .right
        display: inline-block
        flex: 1
        text-align: center
        border-right: 1px solid rgba(7, 17, 27, 0.1)
        .text
          display: block
          margin-top: 18px
          margin-bottom: 4px
          color: rgb(147, 153, 159)
          font-size: 10px
          line-height: 10px
        .price
          font-size: 10px
          color: rgb(7, 17, 27)
          line-height: 24px
          margin-bottom: 18px
          .num
            font-size: 24px
      .right
        border-right: none;
  .cart-text
    padding: 18px
    .title
      font-size: 14px
      color: rgb(7, 17, 27)
      margin-bottom: 12px
      line-height: 14px
    .text
      padding: 8px 0 0 12px
      color: rgb(240, 20, 20)
      padding-bottom: 16px
      // border-bottom: 1px solid rgba(7, 17, 27, 0.1)
    .btn
      text-align: center
      width: 100%
      font-size 8px
      color: #13d1be
  .notice
    padding: 18px 18px 0 18px
    .title
      font-size: 14px
      color: rgb(7, 17, 27)
      margin-bottom: 12px
      line-height: 14px
    .text
      padding: 8px 0 0 12px
      font-size: 14px
      line-height: 24px
      padding-bottom: 16px
      border-bottom: 1px solid rgba(7, 17, 27, 0.1)
      li
        font-size: 14px
        line-height: 16px
        color: rgb(7, 17, 27)
        padding: 16px 12px
        border-bottom: 1px solid rgba(7, 17, 27, 0.1)
    .support
      padding: 16px 12px
      border-bottom: 1px solid rgba(7, 17, 27, 0.1)
      &:last-child
        border: none
      .icon
        display: inline-block;
        width: 18px
        height: 18px
        margin-right: 4px
        background-size: 18px 18px
        background-repeat: no-repeat
        vertical-align: top
        
      .description
        font-size: 12px
        line-height: 16px
        color: rgb(7, 17, 27)
  .photo
    padding: 18px
    .title
      font-size: 14px
      color: rgb(7, 17, 27)
      margin-bottom: 12px
      line-height: 14px
    .pic-wrapper
      width: 100%
      overflow: hidden
      // 图片不换行
      white-space: nowrap
      .pic-list
        font-size: 0
        .pic-item
          display: inline-block
          margin-right: 6px
          width: 120px
          height: 90px
          &:last:child
            margin-right: 0
          img
            width: 120px
            height: 90px
            border-radius: 3px
  .cpinfo
    padding: 18px
    .title
      font-size: 14px
      color: rgb(7, 17, 27)
      margin-bottom: 12px
      line-height: 14px
    .pic-wrapper
      width: 100%
      overflow: hidden
      // 图片不换行
      white-space: nowrap
      .pic-list
        font-size: 12px
        .pic-item
          display: inline-block
          margin-right: 6px
          width: 120px
          height: 90px
          &:last:child
            margin-right: 0
          img
            width: 120px
            height: 90px
            border-radius: 3px
          p
            overflow: hidden
            text-overflow: ellipsis
            white-space: nowrap
            text-align: center
          
  .info
    padding: 18px
    .title
      font-size: 14px
      color: rgb(7, 17, 27)
      margin-bottom: 12px
      line-height: 14px
    .text
      margin-top: 18px
      margin-bottom: 4px
      font-size: 14px
      line-height: 18px
    .item
      font-size: 12px
      line-height: 12px
      color: rgb(7, 17, 27)
      padding: 4px 16px
      // border-bottom: 1px solid rgba(7, 17, 27, 0.1)
      &:last-child
        // border-bottom: 0px solid rgba(7, 17, 27, 0.1) 
</style>

<style lang="scss" scoped>
@import "~@/assets/scss/const.scss";
@import "~@/assets/scss/mixin.scss";

.seller-header {
  position: relative;
  color: #fff;
  line-height: 1;
  font-size: 14px;
  width: auto;
  // font-weight: 200;
  overflow: hidden;
  background-color: rgba(0, 30, 58, 0.6);

  .content-wrapper {
    position: relative;
    display: flex;
    padding: 10px 10px 10px 10px;
    font-size: 0;
    width: 100%;
    .avatar {
      flex: 0, 0, 64px;
      // display: inline-block;
      font-size: 14px;
      vertical-align: top;
      img {
        width: 64px;
        height: 64px;
        border-radius: 10px;
      }
    }
    .content {
      // display: inline-block;
      flex: 1;
      margin-left: 14px;
      width: 100%;
      .title {
        margin: 2px 0 8px 0;
        .brand {
          width: 30px;
          height: 18px;
          display: inline-block;
          vertical-align: top;
          background-size: 30px 18px;
          background-repeat: no-repeat;
        }
        .name {
          // margin-left: 6px;
          font-size: 16px;
          line-height: 18px;
          font-weight: bold;
        }
      }
      .description {
        position: relative;
        font-size: 14px;
        line-height: 18px;
        .text {
          width: 98%;

          // background-color: rgba(7, 17, 27, 0.2);
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      .supports {
        .icon {
          display: inline-block;
          width: 12px;
          height: 12px;
          margin-right: 4px;
          background-size: 12px 12px;
          background-repeat: no-repeat;
          vertical-align: top;
        }
        .text {
          font-size: 10px;
          line-height: 12px;
        }
      }
    }
    .supports-count {
      position: absolute;
      right: 12px;
      bottom: 18px;
      padding: 0 8px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border-radius: 14px;
      background-color: rgba(0, 0, 0, 0.2);
      span {
        font-size: 10px;
        line-height: 24px;
      }
      i {
        position: relative;
        top: 1px;
        font-size: 10px;
        margin-left: 2px;
        line-height: 24px;
      }
    }
  }
  .bulletin-wrapper {
    position: static;
    height: 28px;
    line-height: 28px;
    padding: 0 22px 0 12px;
    background-color: rgba(7, 17, 27, 0.2);
    @include ellipsis(1);
    .text {
      font-size: 10px;
      color: #ffa500;
      margin: 0 4px;
      vertical-align: top;
      @include ellipsis(1);
    }
    i {
      position: absolute;
      top: 8px;
      right: 12px;
      font-size: 10px;
    }
  }
  .background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
      filter: blur(18px);
    }
  }

  // 返回按钮
  .back {
    position: absolute;
    top: 25px;
    right: 19px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
    i {
      display: block;
      padding: 7px;
      font-size: 20px;
      color: #fff;
    }
  }
}
</style>


<style lang="less" scoped>
.card {
  /* 相对定位，方便让before和after伪元素绝对定位偏移 */
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #ffdd1d;

  .cart-info {
    .zk-title {
      padding-left: 16px;
      width: 100%;
      color: #fff;
      font-size: 20px;
      text-align: left;
    }
    .zk-desc {
      padding-left: 16px;
      width: 100%;
      padding-top: 10px;
      color: #fff;
      font-size: 12px;
      text-align: left;
    }
    .zk-btn {
      position: absolute;
      margin-right: 10px;
      right: 0;
      top: 30%;
      background-color: #ffa500;
      color: #fff;
      font-size: 16px;
      text-align: left;
      font-weight: 700;
    }
    .zk-pic {
      padding-left: 16px;
      padding-top: 10px;
      color: #ffa500;
      font-size: 20px;
      font-weight: 700;
      text-align: left;
    }
    .zk-pic-old {
      padding-left: 6px;
      padding-top: 10px;
      color: #c9c9c9;
      text-decoration: line-through;
      font-size: 20px;
      font-weight: 700;
      text-align: left;
    }
    .zk-pic-zk {
      margin-left: 12px;
      // border:  1px solid #ffa500;
      color: #fff;
      font-size: 16px;
      text-align: left;
    }
  }
}
.card-cz {
  /* 相对定位，方便让before和after伪元素绝对定位偏移 */
  position: relative;
  width: 100%;
  height: 80px;
  background-color: #f54e00;

  .cart-info {
    .cz-title {
      padding-left: 16px;
      width: 100%;
      color: #fff;
      font-size: 20px;
      text-align: left;
    }
    .cz-desc {
      padding-left: 16px;
      width: 100%;
      padding-top: 10px;
      color: #fff;
      font-size: 12px;
      text-align: left;
    }
    .cz-btn {
      position: absolute;
      margin-right: 10px;
      right: 0;
      top: 30%;
      background-color: #ffa500;
      color: #fff;
      font-size: 16px;
      text-align: left;
      font-weight: 700;
    }
  }
}
// .card:before,
// .card:after {
//   content: " ";
//   height: 100%;
//   /* 绝对定位进行偏移 */
//   position: absolute;
//   top: 0;

// }

// .card:before {
//   /* 圆点型的border */
//   border-right-width: 8px;
//   border-right-style: dotted;
//   border-right-color:  #fff;
//   /* 偏移一个半径，让圆点的一半覆盖div */
//   left: -4px;
// }

// .card:after {
//   /* 圆点型的border */
//   border-left-width: 8px ;
//   border-left-style: dotted;
//   border-left-color:  #fff;

//   /* 偏移一个半径，让圆点的一半覆盖div */
//   right: -4px;
// }
.swiper {
  text-align: left;
  color: #ff4747;
  font-size: 14px;
  line-height: 28px;
}
.sawtooth {
  /* 注意：radial-gradient是作为background-image属性设置的，而纯色#e24141是作为background-color属性设置的 */
  background: border-box
      radial-gradient(transparent 0, transparent 5px, #e24141 5px),
    padding-box #e24141;
  background-size: 15px 15px;
  background-position: 8px 3px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  position: relative;
}
.sawtooth:before {
  content: " ";
  display: block;
  /* 用相同的颜色覆盖 */
  background-color: #e24141;
  /* 绝对定位，遮住中间所有的洞，只保留边角的锯齿 */
  position: absolute;
  top: 0;
  bottom: 0;
  /* 为锯齿保留的距离 */
  left: 10px;
  right: 10px;
}
</style>


